<template>
  <div class="enter">
    <div class="content">
      <div class="cntTop">
        <span>网站展示品牌 </span>
        <i> | </i>
        <span class="url"> Website Display Brand</span>
      </div>
      <div class="msg">
        <div class="card clearfix">
          <div class="cardImg">
            <img src="../../../assets/img/about/msg.png" alt="">
          </div>
          <div class="cardTxt">
            <span><h2>集合智造</h2></span>
            <span><img src="../../../assets/img/strength/已认证.png" alt=""></span>
            <p class="pp">品牌所属: <a href="">集合智造(北京)科技有限公司</a></p>
            <p class="time">认证时间: 2019-3-9</p>
          </div>
          <el-button type="primary" plain @click="changeBrandMsg">编辑品牌信息</el-button>
        </div>
      </div>
      <div class="cntBottom">
        <p>温馨提示：如展示信息有误，请及时与我们联系</p><span @click="hotline">我要报错 > </span>
      </div>
    </div>
    <!-- 我要报错弹框 -->
    <my-hotline ref="myHotline" />
  </div>
</template>

<script>
import myHotline from '../../../components/template-item1/hotline'

export default {
  name: 'Enter',
  components: {
    myHotline
  },
  methods: {
    changeBrandMsg() {
      this.$router.push('/vMain/brandmsg')
    },
    hotline() {
      this.$refs.myHotline.showHotline()
    }
  }
}
</script>

<style lang="scss" scoped>
.enter{
  .content{
    background:rgba(255,255,255,1);
    padding: 23px 30px 0px 30px;
    .cntTop{
      padding-bottom: 15px;
      border-bottom:1px solid rgba(237,237,237,1);
    }
    span{
      font-size: 18px;
      line-height:24px;
    }
    i{
      width:7px;
      height:15px;
    }
    .url{
      width:151px;
      height:19px;
      font-size:14px;
      line-height:19px;
      color:rgba(153,153,153,1);
    }
    .card{
      margin: 25px 0;
      padding-bottom: 30px;
      border-bottom: 1px dashed #cccccc;
      .cardImg{
        width:202px;
        height:114px;
        padding: 18px 20px;
        background:rgba(255,255,255,1);
        box-shadow:0px 1px 3px rgba(5,36,100,0.18);
        float: left;
        img{
          width:165px;
          height:146px;
          margin: 0 auto;
          border: 1px dashed #000000;
          margin-top: -35px;
        }
      }
      .cardTxt{
        float: left;
        margin-left: 30px;
        h2{
          width:80px;
          height:27px;
          font-size:20px;
          font-weight:600;
          line-height:27px;
          color:rgba(51,51,51,1);
        }
        span{
          float: left;
          img{
            margin-left: 20px;
            margin-top: 4px;
          }
          a{
            width:94px;
            height:19px;
            font-size:14px;
            line-height:19px;
            color:rgba(65,122,239,1);
            margin-left: 20px;
          }
        }
        .pp {
          margin-top: 50px;
          margin-bottom: 20px;
          height:19px;
          font-size:14px;
          line-height:19px;
          color: #cccccc;
          a {
            height:19px;
            font-size:14px;
            line-height:19px;
            color:rgba(65,122,239,1);
          }
        }
        .time {
          width:131px;
          height:19px;
          font-size:14px;
          line-height:19px;
          color:rgba(102,102,102,1);
        }
      }
    }
    .el-button--primary.is-plain{
      float: right;
      margin-top: 40px;
      background-color: #fff;
      height:40px;
      border:1px solid rgba(65,122,239,1);
      border-radius:4px;
      text-align: center;
    }
    .cntBottom{
      margin: 25px 0;
      p{
        width:294px;
        height:19px;
        font-size:14px;
        line-height:19px;
        color:rgba(153,153,153,1);
        float: left;
      }
      span{
        width:56px;
        height:19px;
        font-size:14px;
        line-height:19px;
        color:rgba(65,122,239,1);
      }
    }
  }

}
</style>
